Jarnee
БрендДизайн-системаМакетЭкраныАнимацииПланирование

Motion · библиотека

Анимации Джарни

Единая библиотека движения: сплеш, маскот, загрузка, появления, состояния и атмосфера. Наведите на карточку — под анимацией появится кнопка для скачивания.

Lottie · .json — нативные iOS / Android / React Native HTML / CSS — WebView и гибридные приложения

00 · Основа движения

Motion-токены

Единый источник длительностей и кривых. Любая анимация в продукте берёт значения отсюда — не подбирает на глаз.

Длительности

Instant120msмикро-отклик, нажатия
Quick180msховер, переключатели, чипы
Base240msменю, поповеры, fade
Slow340msвход экрана, bottom-sheet
Ambient3–6sфоновые циклы, дыхание

Кривые

Standard

cubic-bezier(.2,.8,.2,1)

входы и переходы экранов

Out

ease-out

акценты, pop, тосты

InOut

ease-in-out

циклы: bob, halo, дыхание

Linear

linear

спиннер 0.8s, бесконечное вращение

При системном «уменьшить движение» циклы гасятся, остаётся мягкий fade ≤120ms — во всех файлах.

01 · Сплеш-экраны

Заставка приложения

Три полноценных экрана запуска. Каждый зациклен: проход → короткое «дыхание» → повтор.

1

Пробуждение

искра → сфера → открывает глаза

9:41
z
z

Jarnee

Всё учтено

2

Из хаоса в порядок

осколки сходятся в одну сферу

9:41

Jarnee

Всё на месте

3

Орбита

HUD-кольца и иконки втягиваются в знак

9:41

Jarnee

На шаг впереди

02 · Маскот Джарни

Живой знак

Покачивание

idle · loop

Ореол

4s · loop

Моргание

4s · loop
z

Сон → пробуждение

5s · loop

03 · Загрузка и ожидание

Прогресс и заполнители

Спиннер

0.8s · linear

Скелетон

←→ туда-обратно

Точки-лоадер

1.1s · loop
Бесконечный прогресс · 4 варианта на выбор скажите, какой оставить

A · Тропа

маршрут

B · Заполнение орба

маскот

D · Орбита

2.6s · loop

04 · Появление элементов

Входы и переходы

Затухание

fade-in

Поп

pop · spring

Шторка

sheet-in

Тост

toast-in

05 · Состояния и акценты

Пульс, искра, тревога

Пульс-кольцо

1.6s · loop

Искорка

1.8s · loop

SOS · тревога

1.2s · loop

Дыхание

4s · loop

06 · Атмосфера

Фоновое движение

Дрейф орба

9s · loop

Амбиент-градиент

loop